<template>
    <div class="nya" data-name="時与风">
        <div class="mx-3 flex cursor-pointer items-center justify-center">
            <div class="butterfly attribute"></div>
        </div>
    </div>
</template>

<style scoped>
.attribute {
    /* --theme-color: #7EA08A; */
    --theme-color: #ef53ae;
}

.butterfly {
    position: relative;
    width: 1.875rem;
    height: 1.875rem;
    perspective: 31.25rem;
    transform-style: preserve-3d;
    transform: rotate3d(2, 1, -1, 90deg);
    cursor: pointer;
}

.butterfly:after,
.butterfly:before {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: calc(50% - .5rem);
    border-radius: 50%;
    background: var(--theme-color);
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.butterfly:before {
    left: 0;
    opacity: .7;
    border-top-right-radius: 0;
    transform-origin: right top;
    animation-name: flapL;
}

.butterfly:after {
    left: 50%;
    opacity: .5;
    border-top-left-radius: 0;
    transform-origin: left top;
    animation-name: flapR
}

@keyframes flapL {

    25%,
    50% {
        transform: rotateY(-45deg)
    }

    12.5%,
    37.5%,
    65% {
        transform: rotateY(45deg)
    }

    0%,
    to {
        transform: rotateY(-30deg)
    }
}

@keyframes flapR {

    25%,
    50% {
        transform: rotateY(45deg);
    }

    12.5%,
    37.5%,
    65% {
        transform: rotateY(-45deg);
    }

    0%,
    to {
        transform: rotateY(30deg);
    }
}

.nav a:after,
.nya:after {
    position: absolute;
    opacity: 0;
    /* display: none; */
    /* width: -moz-fit-content; */
    /* width: fit-content; */
    font-size: .875rem;
    line-height: 1.25rem;
    content: attr(data-name);
    animation: fade .6s ease-out;
    transition: opacity 0.3s ease;
}

.nav a:after {
    left: -1.5rem;
    top: .625rem
}

.nav-y>a:hover:after,
.nya:hover:after {
    /* display: block; */
    opacity: 1;
}

.nya {
    position: relative;
    --tw-translate-y: 0.75rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    color: var(--theme-color);
    display: flex;
}

.nya:after {
    top: -1.25rem;
    /* left: .25rem; */
    left: -.25rem;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap
}

.flex {
    display: flex
}

.justify-center {
    /* justify-content: center */
}
</style>